import React, {Component, Suspense} from 'react';
import {Layout, Menu, Avatar, Dropdown } from 'antd';
import { LogoutOutlined, SettingOutlined } from '@ant-design/icons';
import SeoContainer from '&components/seo-container';
import styles from './styles.module.less';

import CreateHotMaps from './admin/create-hotmaps';
import MemberList from './admin/member-list';
import AdminHotMap from './admin/hotmaps';
import UnitList from './admin/unit-list';
import AdminSetting from './admin/setting';

import UserHotMaps from './user/hotmaps';
import PhotoAlbum from './user/photo-album';

import AlertList from './common/alert-list';

const {Content, Header, Sider} = Layout;
const { SubMenu } = Menu;

class HomePage extends Component {
    constructor(props) {
        super(props);
    }

    matchPath = (e) => {
        const {history} = this.props;
        history.push(e.key);
    };

    render() {
        const menu = (
            <Menu>
                <Menu.Item>
                    <SettingOutlined />
                    个人设置
                </Menu.Item>
                <Menu.Divider/>
                <Menu.Item>
                    <LogoutOutlined />
                    退出登录
                </Menu.Item>
            </Menu>
        );
        return null;
        return (
            <SeoContainer title="interview">
                <Layout>
                    <Layout>
                        <Sider width="200">
                            <div className="logo">
                                Interview Room
                            </div>
                            <Menu
                                mode="inline"
                                theme="dark"
                                className="sider-nav"
                                onClick={this.matchPath}
                            >
                                <Menu.Item disabled>----管理员界面----</Menu.Item>
                                <Menu.Item key="/admin/member-list">成员列表</Menu.Item>
                                <Menu.Item key="/common/alert-list">报警1列表</Menu.Item>
                                <Menu.Item key="/admin/unit-list">单位列表</Menu.Item>
                                <SubMenu key="sub1" title="热点图">
                                    <Menu.Item key="/admin/create-hotmaps">
                                        新建热点图
                                    </Menu.Item>
                                    <Menu.Item key="/admin/hotmaps">
                                        查看热点图
                                    </Menu.Item>
                                </SubMenu>
                                <Menu.Item key="/admin/setting">个人设置</Menu.Item>



                                <Menu.Item disabled>----用户界面界面----</Menu.Item>
                                <Menu.Item key="/user/hotmaps">所有热点图</Menu.Item>
                                <Menu.Item key="/user/photo-album">临时图库</Menu.Item>
                                <Menu.Item key="/common/alert-list">报警列表</Menu.Item>
                            </Menu>
                        </Sider>
                        <Content>
                            <Header className="global-header">
                                <div>

                                </div>
                                <div>
                                    <Dropdown overlay={ menu } placement="bottomLeft" trigger={['hover']}>
                                        <div>
                                            <Avatar style={{
                                                backgroundColor: "#1890ff",
                                                verticalAlign: 'middle'
                                            }}>
                                                {username}
                                            </Avatar>
                                            <span style={{
                                                fontSize: '16px',
                                                marginLeft: '10px',
                                                verticalAlign: 'middle'
                                            }}>
                                                {username}
                                            </span>
                                        </div>
                                    </Dropdown>
                                </div>
                            </Header>
                            {/* <div className="interview-article">
                                <Suspense fallback={<div>loading</div>}>
                                    <Switch>
                                        <Route path="/admin/create-hotmaps" component={CreateHotMaps}/>
                                        <Route path="/admin/member-list" component={MemberList}/>
                                        <Route path="/admin/hotmaps" component={AdminHotMap}/>
                                        <Route path="/admin/organization-list" component={UnitList}/>
                                        <Route path="/admin/setting" component={AdminSetting}/>
                                        <Route path="/common/alert-list" component={AlertList}/>
                                        <Route path="/user/hotmaps" component={UserHotMaps}/>
                                        <Route path="/user/photo-album" component={PhotoAlbum}/>
                                    </Switch>
                                </Suspense>
                            </div> */}
                        </Content>
                    </Layout>
                </Layout>
            </SeoContainer>
        )
    }
}

const mapStateToProps = (state) => {
    return state;
};

const mapDispatchToProps = (dispatch) => {
    return {

    };
};

export default HomePage;